<template>
	<view class="post-container">
		<!-- 顶部操作栏 -->
		<view class="action-bar">
			<view class="cancel-btn" @click="cancel">取消</view>
			<view class="submit-btn" :class="{ disabled: !canSubmit }" @click="submitPost">发布</view>
		</view>
		
		<!-- 发帖内容区 -->
		<view class="content-section">
			<input 
				class="title-input" 
				v-model="postTitle"
				placeholder="请输入标题（选填）"
				maxlength="50"
			/>
			<textarea 
				class="content-input"
				v-model="postContent"
				placeholder="分享你的故事..."
				maxlength="2000"
				:adjust-position="false"
			></textarea>
			
			<!-- 图片上传区 -->
			<view class="image-upload">
				<view class="image-list">
					<view 
						class="image-item" 
						v-for="(img, index) in images" 
						:key="index"
					>
						<image :src="img" mode="aspectFill"></image>
						<view class="delete-btn" @click.stop="deleteImage(index)">×</view>
					</view>
					<view 
						class="upload-btn" 
						v-if="images.length < 9"
						@click="chooseImage"
					>
						<text class="icon">+</text>
						<text class="text">添加图片</text>
					</view>
				</view>
				<text class="tip">最多上传9张图片</text>
			</view>
			
			<!-- 分类选择 -->
			<view class="category-select">
				<text class="label">选择分类</text>
				<scroll-view class="category-list" scroll-x>
					<view 
						v-for="(category, index) in categories" 
						:key="index"
						:class="['category-item', { active: selectedCategory === category.id }]"
						@click="selectCategory(category.id)"
					>
						{{ category.name }}
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			postTitle: '',
			postContent: '',
			images: [],
			selectedCategory: null,
			categories: [
				{ id: 1, name: '情感' },
				{ id: 2, name: '美食' },
				{ id: 3, name: '旅行' },
				{ id: 4, name: '时尚' },
				{ id: 5, name: '运动' },
				{ id: 6, name: '科技' }
			]
		}
	},
	computed: {
		canSubmit() {
			return this.postContent.trim() && this.selectedCategory
		}
	},
	methods: {
		cancel() {
			uni.navigateBack()
		},
		submitPost() {
			if (!this.canSubmit) return
			
			// TODO: 提交帖子到服务器
			uni.showLoading({
				title: '发布中...'
			})
			
			setTimeout(() => {
				uni.hideLoading()
				uni.showToast({
					title: '发布成功',
					icon: 'success'
				})
				uni.navigateBack()
			}, 1500)
		},
		chooseImage() {
			uni.chooseImage({
				count: 9 - this.images.length,
				success: (res) => {
					this.images = [...this.images, ...res.tempFilePaths]
				}
			})
		},
		deleteImage(index) {
			this.images.splice(index, 1)
		},
		selectCategory(categoryId) {
			this.selectedCategory = categoryId
		}
	}
}
</script>

<style lang="scss">
.post-container {
	min-height: 100vh;
	background: #fff;
	padding-bottom: env(safe-area-inset-bottom);
	
	.action-bar {
		height: 88rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		border-bottom: 2rpx solid #f5f6f7;
		background: #fff;
		position: sticky;
		top: 0;
		z-index: 100;
		
		.cancel-btn {
			font-size: 28rpx;
			color: #666;
		}
		
		.submit-btn {
			font-size: 28rpx;
			color: #fff;
			background: #ff6b6b;
			padding: 12rpx 40rpx;
			border-radius: 30rpx;
			
			&.disabled {
				opacity: 0.5;
			}
		}
	}
	
	.content-section {
		padding: 30rpx;
		
		.title-input {
			font-size: 32rpx;
			font-weight: 500;
			margin-bottom: 20rpx;
		}
		
		.content-input {
			width: 100%;
			height: 300rpx;
			font-size: 28rpx;
			line-height: 1.6;
		}
		
		.image-upload {
			margin-top: 30rpx;
			
			.image-list {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 20rpx;
				
				.image-item {
					position: relative;
					width: 100%;
					padding-bottom: 100%;
					
					image {
						position: absolute;
						width: 100%;
						height: 100%;
						border-radius: 12rpx;
					}
					
					.delete-btn {
						position: absolute;
						top: -20rpx;
						right: -20rpx;
						width: 40rpx;
						height: 40rpx;
						background: rgba(0, 0, 0, 0.5);
						border-radius: 50%;
						color: #fff;
						font-size: 32rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
				
				.upload-btn {
					border: 2rpx dashed #ddd;
					border-radius: 12rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding-bottom: 100%;
					position: relative;
					
					.icon {
						font-size: 48rpx;
						color: #999;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -80%);
					}
					
					.text {
						font-size: 24rpx;
						color: #999;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, 20%);
						white-space: nowrap;
					}
				}
			}
			
			.tip {
				font-size: 24rpx;
				color: #999;
				margin-top: 16rpx;
				display: block;
			}
		}
		
		.category-select {
			margin-top: 40rpx;
			
			.label {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 20rpx;
				display: block;
			}
			
			.category-list {
				white-space: nowrap;
				
				.category-item {
					display: inline-block;
					padding: 12rpx 30rpx;
					font-size: 28rpx;
					color: #666;
					background: #f5f6f7;
					border-radius: 30rpx;
					margin-right: 20rpx;
					transition: all 0.3s;
					
					&.active {
						color: #fff;
						background: #ff6b6b;
					}
				}
			}
		}
	}
}
</style> 